<template>
  <div class="container">
    <div class="top">
      <el-input
        style="width: 200px; margin-bottom: 5px"
        v-model="search.searchCode"
        placeholder="请输入商品名称或编码"
        clearable
      ></el-input>
      <el-select v-model="search.class" placeholder="请选择商品层级">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="search.is_flag" placeholder="是否有库存">
        <el-option
          v-for="item in flag"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        style="width: 300px"
        :disabled="true"
        placeholder="请搜索类别信息"
        v-model="classNameList.name"
      >
        <template slot="prepend">类别</template>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="classBtn"
        ></el-button>
      </el-input>
      <el-button
        size="small"
        type="primary"
        class="handleSearch"
        icon="el-icon-search"
        @click="handleSearch()"
        >本地查询</el-button
      >
      <el-button
        size="small"
        type="primary"
        class="handleSearch"
        icon="el-icon-search"
        @click="erpSearch()"
        >ERP查询</el-button
      >
      <el-button
        size="small"
        type="danger"
        class="handleSearch"
        icon="el-icon-delete"
        @click="empty()"
        >清空</el-button
      >
      <el-button
        size="small"
        type="success"
        class="handleSearch"
        icon="el-icon-lock
"
        @click="isLock(1)"
        >锁定</el-button
      >
      <el-button
        size="small"
        type="info"
        class="handleSearch"
        icon="el-icon-unlock"
        @click="isLock(0)"
        >解锁</el-button
      >
      <el-button
        size="small"
        type="warning"
        class="handleSearch"
        icon="el-icon-edit"
        @click="hierarchy()"
        >设置商品层级</el-button
      >
      <el-button
        type="info"
        size="small"
        icon="el-icon-tickets"
        @click="derive()"
        >本地导出</el-button
      >
    </div>
    <el-table
      max-height="600"
      :data="tableData"
      border
      style="width: 100%"
      empty-text="暂无数据"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="code"
        label="商品编号"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="class_name"
        label="erp商品分类"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="unit"
        label="单位"
        align="center"
      ></el-table-column>
      <el-table-column label="库存数量" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.stock_net_num || "0.0000" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="stock_qty"
        label="箱数库存"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="stock_amount"
        label="商品金额"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="class_level"
        label="商品层级"
        align="center"
      ></el-table-column>
      <el-table-column label="锁定" align="center" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.lockVal"
            active-text="锁定"
            inactive-text="未锁定"
            @change="isLock(scope)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="分类" width="150" align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.al_name"
            size="mini"
            @change="aliasName(scope)"
            placeholder="请输入分类名"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="加价率" width="180" align="center">
        <template slot-scope="scope">
          <el-input-number
            :controls="false"
            v-if="scope.row.erp_id ? true : false"
            v-model="scope.row.markup"
            size="mini"
            :min="0"
            controls-position="right"
            :precision="2"
            :step="1"
            @change="markup(scope)"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="税率" width="180" align="center">
        <template slot-scope="scope">
          <el-input-number
            :controls="false"
            v-model="scope.row.tax_rate"
            size="mini"
            :min="0"
            controls-position="right"
            :precision="2"
            :step="1"
            @change="taxrate(scope)"
          ></el-input-number>
        </template>
      </el-table-column>
     
      <el-table-column
        prop="create_at"
        label="添加时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="update_at"
        label="最后同步时间"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            @click="handleEdit(scope)"
            >同步</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      center
      title="设置商品层级"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <el-radio-group
        v-model="radio"
        style="texe-align: center; display: flex; justify-content: center"
      >
        <el-radio :label="1">一级</el-radio>
        <el-radio :label="2">二级</el-radio>
        <el-radio :label="3">三级</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <pagination
      @page="handleSizeChange"
      @pagesize="handleCurrentChange"
      :pageData="pageData"
    ></pagination>
    <classDialog :classdialog="classdialog" @tag="classTag"></classDialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { parseTime } from "@/utils/index";
import Pagination from "@/components/pagination";
import ClassDialog from "@/components/grossMargin/classDialog";

import {
  commodityList,
  erpCommodityList,
  synchronization,
  setMarkup,
  lockGoods,
  importGood,
  setTaxRate,
  setAliasName,
  setGoodsClassLevel,
  setGoodsRatio,
} from "@/api/commodity/commodityList";
export default {
  components: {
    pagination: Pagination,
    classDialog: ClassDialog,
  },
  data() {
    return {
      //页面数据
      tableData: [],
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      classdialog: {
        centerDialogVisible: false,
      },
      classNameList: {
        name: "",
        code: "",
      },
      search: {
        searchCode: "",
        class: "",
        is_flag: "",
      },
      flag: [
        {
          value: "0",
          label: "包含无库存",
        },
        {
          value: "",
          label: "不包含无库存",
        },
      ],
      options: [
        {
          value: "1",
          label: "一级",
        },
        {
          value: "2",
          label: "二级",
        },
        {
          value: "3",
          label: "三级",
        },
      ],
      port: 0, //判断是本地数据还是erp数据
      multipleSelection: [],
      dialogVisible: false,
      radio: 1,
    };
  },

  created() {
    //页面数据
    this.getData();
  },
  methods: {
    //页面数据
    getData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        search: this.search.searchCode,
        class_level: this.search.class,
        class_id: this.classNameList.code,
        is_flag: this.search.is_flag == "" ? 1 : 0,
      };
      commodityList(data)
        .then((res) => {
          if (res.code == 0) {
            res.data.data.forEach((res) => {
              res.lockVal = res.is_lock == 1 ? true : false;
              res.typeStr = res.status == 1 ? "有效" : "无效";
              res.create_at = parseTime(res.add_time);
              res.update_at = parseTime(res.update_time);
            });
            this.tableData = res.data.data;
            this.pageData.page = res.data.current_page;
            this.pageData.pagesize = res.data.per_page;
            this.pageData.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    classTag(data) {
      this.classNameList = {
        name: "",
        code: "",
      };
      console.log(data, 11111);
      let arrName = [];
      let arrCode = [];
      data.forEach((res) => {
        arrName.push(res.name);
        arrCode.push(res.id);
      });
      this.classNameList.name = arrName.join(",");
      this.classNameList.code = arrCode.join(",");
    },
    //超级类别搜索
    classBtn() {
      this.classdialog = {
        centerDialogVisible: true,
      };
    },
    //锁定
    isLock(scope) {
      let data = null;
      // 判断是多选还是单选
      if (scope.row) {
        data = {
          ids: scope.row.id,
          status: scope.row.lockVal == true ? 1 : 0,
        };
      } else {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: "info",
            message: "请选择商品",
          });
          return false;
        } else {
          data = {
            ids: this.multipleSelection,
            status: scope,
          };
        }
      }
      lockGoods(data).then((res) => {
        if (res.code == 0) {
          this.getData();
          this.$message({
            type: "success",
            message: res.msg,
          });
        }
      });
    },
    // erp页面搜索数据
    erpGetData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        search: this.search.searchCode,
      };
      erpCommodityList(data)
        .then((res) => {
          if (res.code == 0) {
            res.data.data.forEach((res) => {
              res.typeStr = res.status == 1 ? "有效" : "无效";
              res.create_at = parseTime(res.add_time);
              res.update_at = parseTime(res.update_time);
            });
            this.tableData = res.data.data;
            this.pageData.page = res.data.current_page;
            this.pageData.pagesize = res.data.per_page;
            this.pageData.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //同步
    handleEdit(scope) {
      this.$confirm("是否同步?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = {
          code: scope.row.code,
        };
        importGood(data).then((res) => {
          if (res.code == 0) {
            this.getData();
            this.$message({
              type: "success",
              message: res.msg,
            });
          }
        });
      });
    },
    //加价率
    markup(scope) {
      console.log(scope);
      let data = {
        id: scope.row.id,
        markup: scope.row.markup,
      };
      setMarkup(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    //修改税率
    taxrate(scope) {
      let data = {
        id: scope.row.id,
        taxrate: scope.row.tax_rate,
      };
      setTaxRate(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    
    //修改分类
    aliasName(scope) {
      let data = {
        id: scope.row.id,
        aliasname: scope.row.al_name,
      };
      setAliasName(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      });
    },
    //导出
    derive() {
      this.$confirm("是否导出?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let link = document.createElement("a");
          let status = this.search.status == -1 ? "" : this.search.status;
          let isPay = this.search.is_pay == -1 ? "" : this.search.is_pay;
          let is_flag = this.search.is_flag == "" ? 1 : 0;
          link.href =
            this.$axios.defaults.baseURL +
            "/api/goods/exportGoodsList?token=" +
            getToken() +
            "&search=" +
            this.search.searchCode +
            "&class_level=" +
            this.search.class +
            "&class_id=" +
            this.classNameList.code +
            "&is_flag=" +
            is_flag;

          link.click();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
    // 确定
    confirm() {
      let data = {
        level: this.radio,
        ids: this.multipleSelection.join(","),
      };
      setGoodsClassLevel(data).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: res.msg || res.message,
            type: "success",
          });
          this.dialogVisible = false;
          this.radio = 1;
          this.$refs.multipleTable.clearSelection();
          this.getData();
        } else {
          this.$message({
            type: "info",
            message: res.msg || res.message,
          });
        }
      });
      console.log(data);
    },
    //设置层级
    hierarchy() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: "info",
          message: "请选择商品",
        });
      } else {
        this.dialogVisible = true;
      }
    },

    // 本地搜索
    handleSearch() {
      this.pageData.page = 1;
      this.pageData.total = null;
      this.port = 0;
      this.getData();
    },
    // erp搜索
    erpSearch() {
      this.pageData.page = 1;
      this.port = 1;
      this.erpGetData();
    },
    //清空
    empty() {
      this.search = {
        searchCode: "",
        class: "",
        is_flag: "",
      };
      this.classNameList.name = "";
      this.classNameList.code = "";
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      if (this.port == 0) {
        this.getData();
      } else {
        this.erpGetData();
      }
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      if (this.port == 0) {
        this.getData();
      } else {
        this.erpGetData();
      }
    },
    //选取
    handleSelectionChange(val) {
      this.multipleSelection = [];
      let valMain = val;
      valMain.forEach((res) => {
        this.multipleSelection.push(res.id);
      });
    },
  },
};
</script>
<style scoped>
.top {
  position: relative;
}

.add {
  position: absolute;
  right: 0;
  top: 4px;
}
.pagination {
  text-align: right;
  padding: 10px;
}
</style>